{% extends "base.html" %}


{% block title %}
职员管理-添加
{% endblock %}

{% block label %}
职员管理-添加
{% endblock %}

{% block contenter %}
<div class="col-lg-12">
    <div class="row">
        <p></p>
        <form method="post" enctype="multipart/form-data">
            <input id="csrf_token" name="csrf_token" type="hidden"
                   value="IjIyZjA5NzY2MjI4MGZiMDc3OGQ0ZTg2ZTdiOGZkYTM5NTExNzFkODQi.XrNpNA.ZxPBMg01inEMf4xF_tONt1YOKz0">
            <div class="form-group">
                <label class="control-label">用户名：</label>
                <input class="form-control" id="username" type="text" name="username"><span id="error" style="color: #910000"> </span>
                <label class="text-primary username_error"></label>
            </div>
            <div class="form-group">
                <label class="control-label">密码：</label>
                <input class="form-control" type="password" name="password">
                <label class="text-primary password_error"></label>
            </div>
            <div class="form-group">
                <label class="control-label">昵称：</label>
                <input class="form-control" type="text" name="nickname">
            </div>
            <div class="form-group">
                <label class="control-label">性别：</label>
                <select class="form-control" name="gender">
                    <option value="男" selected>男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <div class="form-group">
                <label class="control-label">年龄：</label>
                <input class="form-control" type="number" name="age">
            </div>
            <div class="form-group">
                <label class="control-label">电话：</label>
                <input class="form-control" type="text" name="phone">
            </div>
            <div class="form-group">
                <label class="control-label">邮箱：</label>
                <input class="form-control" type="text" name="email">
            </div>
            <div class="form-group">
                <label class="control-label">地址：</label>
                <textarea class="form-control" name="address"></textarea>
            </div>
            <div class="form-group">
                <label class="control-label">部门：</label>
                <select class="form-control" name="department_id" id="department">
                    {% for i in department_list %}
                    <option value="{{ i.id }}">{{ i.d_name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label class="control-label">职位：</label>
                <select class="form-control" id="pos_id" name="position_id">
                </select>
            </div>
            <div class="form-group">
                <button class="btn btn-primary btn-block">提交</button>
            </div>
        </form>
    </div>
</div>
<script src="/static/lib/sb-admin/vendor/jquery/jquery.min.js"></script>
<script>
    $("#username").blur(
        function () {
            var value = $("#username").val();
            // 使用ajak 技术
            $.ajax({
                url:"/OA/has_user/?username="+value,
                type:"get",
                data:"",
                // 成功执行的函数
                success:function (data) {
                    console.log(data);
                    $("#error").text(data["d"])
                },
                error:function (error) {
                    $("#error").text(data["d"])
                }
            })
        }
    );
    $("#department").blur(
        function () {
            // 获取部门下路框的数据
            var dep = $("#department").val();
            $.ajax({
                url:"/OA/positions/?d_id="+dep,
                type: "GET",
                data: "",
                success:function (data) {
                    //<option value="id">p_name</option>
                    // 获取节点
                    console.log(data);
                    var pos = document.getElementById("pos_id");
                    //document.getElementById("dv").innerHTML = "";
                    // 首先清空节点
                    pos.innerHTML="";
                    for ( var i in data['data']){
                        // 获取职位名称
                        pos_text = data['data'][i]['p_name'];
                        // 获取职位id
                        pos_id = data['data'][i]['id'];
                        // 创建节点
                        var option = document.createElement("option");
                        var text = document.createTextNode(pos_text);
                        // 设置节点value的id值
                        option.setAttribute("value",pos_id);
                        // 添加节点和文本信息
                        option.appendChild(text);
                        pos.appendChild(option);
                    }
                },
                error:function (error) {
                }
            })
        }
    )
</script>
{% endblock %}
